<template>
    <div class="cell-item">
        <LabelRow class="LabelRow" :text="'共'+dataList.length+'条记录>>'" v-bind:label="label" @onMore="onMore"></LabelRow>
        <ul class="cell-ul">
            <div v-for="(item,index) in dataList" :key="index" class="cell-li">
                <div :class="getStatusClass(item)" class="db-status">{{item.eventType}}</div>
                <!-- <i v-bind:class="['tag',item.type]"></i> -->
                <div class="cell-label">
                    <div class="text-over">
                        <!-- <span>「{{item.eventType||'-'}}」</span> -->
                        <span>{{item.eventNumber||'-'}}</span>
                        <span> {{item.disposalUnitCodeName||'-'}}</span>
                        <!-- <span>{{getTimeStr(item.myLimitTime,'yyyy-MM-dd')||'-'}}</span>
                        <a class="warn-num">{{item.amount||0}}</a>
                        <span>起超</span>
                        <span class="warn-day">{{item.warnTime||0}}</span>
                        <span>天未办结</span> -->
                    </div>
                </div>
                <div>
                    <span class="warn-time">
                        <span>{{getTimeStr(item.myLimitTime,"yyyy-MM-dd")}}</span>
                    </span>
                </div>
            </div>
            <div v-if="!dataList.length" class="no-data">
                <img src="../../assets/no-data.png" alt="">
            </div>
        </ul>
    </div>
</template>
<script>
import LabelRow from "../common/labelRow.vue";
import Pubsub from "../../utils/pubsub";

import { ZHZXEventInfoQueryWarnInfo,findByDictCode } from "../../config/api.js";
import { getDateStr, getTimeStr,getPastTime } from "../../utils";

export default {
    components: {
        LabelRow,
    },
    data() {
        return {
            label: {
                url: require("../../assets/unifyAcceptWorkbench/yjtx-icon.png"),
                label: "预警提醒"
            },
            dataList: [],
            getTimeStr,
            //弹窗数据
            thConfig: [
                { prop: "eventTitle", label: "标题" },
                { prop: "eventType", label: "事件类型" },
                { prop: "eventNumber", label: "工单号" },
                { prop: "eventKeyword", label: "关键词" },
                { prop: "disposalUnitCodeName", label: "处置单位" },
                {
                    prop: "myLimitTime",
                    label: "本级到期时间",
                    formatter: function(row, column) {
                        return getTimeStr(row.myLimitTime,'yyyy-MM-dd');
                    }
                }
            ] //table头部配置
        };
    },
     created() {
        this.pubsub_token = Pubsub.subscribe(
            "ZHZX_WORKBENCH_TODO",
            (type, args) => {
                this.getList();
            }
        );
        this.getDir("warnTimeLevel");
    },
  
    destroyed() {
        this.pubsub_token && Pubsub.unsubscribe(this.pubsub_token);
        this.timer && clearInterval(this.timer);
    },
    methods: {
        onMore() {
            Pubsub.publish("yjAndDbDialog", { dataList:this.dataList,config:this.thConfig,title:'预警提醒' });
        },
        /**
            获取数据字典
         */
        getDir(type) {
            findByDictCode({ dictCode: type }).then((result = {}) => {
                let data = result.data || [];
                this.warnDic = data;
                this.getList();
            });
        },
        /**
         * 获取预警提醒列表
         */
        getList() {
            ZHZXEventInfoQueryWarnInfo({ pageNum: 1, pageSize: 999,type:2 }).then(
                (result = {}) => {
                    let { rows } = result;
                    this.scrollFlag = false;
                    // this.warnDic
                    rows.map(item => {
                        let min = getPastTime(item.createTime);
                        let type = this.getWarnType(min);
                        item.type = type;
                        item.warnTime = getDateStr(item.createTime);
                    });
                    this.dataList = rows;
                    this.totalPage = result.totalPage;
                    this.timer = setInterval(this.setWarnTime, 1000 * 60);
                }
            );
        },
        /**
         * 换算警告时间
         */
        setWarnTime() {
            let tamp = new Date().getTime();
            this.dataList.map(item => {
                let min = getPastTime(item.createTime);
                let type = this.getWarnType(min);
                item.type = type;
                item.warnTime = getDateStr(item.createTime);
            });
        },
        getWarnType(min) {
            let type = "green";
            if (min > this.warnDic[1].dictDataCode) {
                type = this.warnDic[2].dictDataName;
            } else if (min > this.warnDic[0].dictDataCode) {
                type = this.warnDic[1].dictDataName;
            } else if (min <= this.warnDic[0].dictDataCode) {
                type = this.warnDic[0].dictDataName;
            }
            return type;
        },
        getStatusClass(item) {
            let type = {
                "投诉举报": "sos",
                "咨询求助": "warning",
                "意见建议": "blue",
                "表彰表扬": "orange"
            };
            return type[item.eventType];
        }
    }
};
</script>

<style lang="scss" scoped>
@import "../../css/unifyAcceptWorkbench.scss";
.LabelRow{
    cursor: pointer;
}
.tag {
    width: 20px;
    height: 14px;
    border-radius: 7px;
    margin-right: 20px;
}
.default {
    background-color: #e60012;
}
.normal {
    background-color: #009944;
}
.tel {
    color: #1a36a9;
    margin-right: 3px;
}
.warn-time {
    font-size: 18px;
    color: #1a36a9;
    span {
        font-size: 14px;
        color: #888;
    }
}
.warn-num {
    color: #1a36a9;
    text-decoration: underline;
    margin-right: 2px;
}
.warn-day {
    color: #c60000;
    margin: 0 2px;
}

.yellow {
    background-color: yellow;
}
.green {
    background-color: #009944;
}
.red {
    background-color: red;
}

.db-status {
    color: #fff;
    padding: 0 3px;
    margin-right: 20px;
}
.warning {
    background: #e60012;
}
.sos {
    background: #00a01e;
}
.blue {
    background-color: blue;
}
.orange {
    background-color: #f6dda4;
}
</style>
